<template>
	<div class="div">
		<div class="div2">
			<h5>商品一级类型</h5>
			<h6>简单演示系统只需要一级类型即可</h6>
		</div>
		<hr>
		<el-button style="background-color: #1E9FFF;color: white;margin-bottom: 3vh;margin-top: 2vh;margin-left: 2vw;"
			@click="add()">添加新的类型</el-button>
		<div class="div3">
			
			<el-table :data="btn" border style="width: 100%;">
				<el-table-column prop="id" label="一级类型ID" min-width="160">
				</el-table-column>
				<el-table-column prop="prio" label="顺序" min-width="160">
				</el-table-column>

				<el-table-column prop="name" label="一级类型名称" min-width="160">
				</el-table-column>

				<el-table-column fixed="right" label="修改" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="goUpdate(scope.row.id)">修改</el-button>
					</template>
				</el-table-column>
				<el-table-column label="二级节点信息"  min-width="160">
				  <template slot-scope="scope"  @change="handleChange2">
				    <el-table :data="scope.row.childList">
						<el-table-column prop="name"  min-width="160">
						</el-table-column>
					</el-table>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog
			  title="类型信息"
			  :visible.sync="centerDialogVisible"
			  width="30%"
			  center>
			 <el-form ref="type" :model="type" label-width="100px">
			 	<el-form-item label="一级ID">
			 		<el-input v-model="type.id"  readonly ></el-input>
			 	</el-form-item>
			 	
			 	<el-form-item label="一级类型名称">
			 		<el-input v-model="type.name"></el-input>
			 	</el-form-item>
			 	
			 	<el-form-item label="显示顺序">
			 		<el-input v-model="type.prio"></el-input>
			 	</el-form-item>
			 	<el-button @click="updateType()">{{act}}</el-button>
			 </el-form>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Firstleveltype",
		data() {
			return {
				booktypes: [],
				 centerDialogVisible: false,
				 type:{},
				 types:[],
				 act:''
			}
		},
		computed:{
			btn(){
				this.booktypes=[];
				this.types.forEach((item,i)=>{
					if(item.pid==0){
						console.log(1111);
						this.booktypes.push({
							id:item.id,
							name:item.name,
							prio:item.prio,
						})
					}
				})
				console.log(this.booktypes);
				console.log(this.types);
				this.booktypes.forEach((item,i)=>{
					let n=[];
					// console.log(item.id);
					this.types.forEach((j,i)=>{
						// console.log(j.id);
						if(j.pid>0&&j.pid==item.id){
							// console.log(j.pid);
							// console.log(item.id);
						n.push({
							id:j.id,
							name:j.name,
							prio:j.prio,
						})
					}
					})
					item.childList=n;
					console.log(n);
					
					// console.log(n);
				})
				console.log(this.booktypes);
				return this.booktypes;
			}
		},
		methods: {
			add(){
				this.act='添加';
				this.type={id:0,prio:100};
				this.centerDialogVisible = true;
			},
			updateType(){
				this.centerDialogVisible = false;
				console.log(this.booktypes);
				console.log(this.type);
				this.$postk("/api/adm/type/add",this.type).then((resp) => {
					console.log(resp.data);
					console.log(this.type);
					this.booktypes=resp.data.data;
				})
			},
			 handleChange2(value) {
			 	console.log(value);
			 },
			 goUpdate(id){
				 this.act='修改';
				 this.centerDialogVisible = true;
				 this.$get("/api/adm/type/findById/"+id).then((resp) => {
				 console.log(resp.data);
				 this.type=resp.data.data;
				 })
			 },
			book() {
				this.$get("/api/adm/type/findAll2").then((resp) => {
					console.log(resp.data);
					this.types=resp.data.data;
				})
			},

		},
		mounted() {
			console.log(this.types);
			this.book();
		}
	}
</script>

<style scoped>
	.div {
		width: 100%;
	}

	.div .div2 {
		width: 95%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 4vh auto;
	}

	.div .div2 h5 {}

	.div hr {
		width: 95%;
		margin: 1vh auto;
		border: 1px solid #1E9FFF;
	}
</style>
